<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.row span {
			width: 5rem;
			height: 5rem;
			background: #f5f5f5;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 添加边 -->
		<div class="row mt-5 justify-content-around">
			<span class="border"></span>
			<span class="border-top"></span>
			<span class="border-right"></span>
			<span class="border-bottom"></span>
			<span class="border-left"></span>
		</div>

		<!-- 删除边框 -->
		<div class="row mt-5 justify-content-around">
			<span class="border border-0"></span>
			<span class="border-top border-top-0"></span>
			<span class="border-right border-right-0"></span>
			<span class="border-bottom border-bottom-0"></span>
			<span class="border-left border-left-0"></span>
		</div>

		<!-- 边框颜色 -->
		<div class="row mt-5 justify-content-around">
			<span class="border border-primary"></span>
			<span class="border border-secondary"></span>
			<span class="border border-success"></span>
			<span class="border border-danger"></span>
			<span class="border border-warning"></span>
			<span class="border border-info"></span>
			<span class="border border-light"></span>
			<span class="border border-dark"></span>
			<span class="border border-white"></span>
		</div>

		<!-- 边框圆角 -->
		<div class="row mt-5 justify-content-around bg-info py-2">
			<span class="rounded"></span>
			<span class="rounded-top"></span>
			<span class="rounded-right"></span>
			<span class="rounded-bottom"></span>
			<span class="rounded-left"></span>
		</div>
	</div>
</body>

</html>
